import { PureComponent } from 'react';
import moment from 'moment';
import styles from './StaffInfoList.less';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    DatePicker,
    Icon,
    Button
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};
let eduChangeInput = null;
@Form.create({
	onValuesChange(props, changedValues, allValues){
		if(eduChangeInput == null) {
			eduChangeInput = changedValues;
		}else {
			Object.assign(eduChangeInput,eduChangeInput,changedValues);
		}
	}
})
class UpdateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	    if(props.values) {
	    	this.state = {
		    	eduList:props.values
		    }
	    }else {
	    	this.state = {
		    	eduList:[]
		    }
	    }
	}
	
	componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.values && nextProps.values !== this.props.values) {
	      this.setState({eduList: [...nextProps.values,{id: '1',punid: ''}]});
		}
		
	}
 

	handleLocalUpdate = (event,res) => {
		event.preventDefault();
		const { form,handleUpdateByEdu } = this.props;
	    form.validateFields((err, fieldsValue) => {
	        if (err) return;
		    form.resetFields();
			if(eduChangeInput == null) {
				fieldsValue.id = res.id;
				fieldsValue.punid = res.punid;
				fieldsValue.graduation_school = res.graduation_school;
				fieldsValue.major = res.major;
				fieldsValue.education = res.education;
				fieldsValue.teaching_methods = res.teaching_methods;
				fieldsValue.educational_experience_start_time = res.educational_experience_start_time;
				fieldsValue.educational_experience_end_time = res.educational_experience_end_time;
				fieldsValue.first_education_type = res.first_education_type;
			}else {
				Object.assign(fieldsValue,res,eduChangeInput);
			}
			if(fieldsValue.educational_experience_start_time) {
      			fieldsValue.educational_experience_start_time = moment(moment(fieldsValue.educational_experience_start_time)._d).format("YYYY-MM-DD");
      		}
			if(fieldsValue.educational_experience_end_time) {
      			fieldsValue.educational_experience_end_time = moment(moment(fieldsValue.educational_experience_end_time)._d).format("YYYY-MM-DD");
      		}
		    handleUpdateByEdu(fieldsValue);
		});
	};
	
	
	educationList = () => {
		const { handleEducation,eduCurrentIndex,cancelEducation,handleDeleteByEdu } = this.props;
  		const { getFieldDecorator } = this.props.form;
  		const _this = this;

  		return this.state.eduList.map(function(res,index) {
			const editEducation = res.id == eduCurrentIndex ? true:false;
		  	return (
				<div style={res.id != 1?{display: 'block',marginBottom:'0'}:{display: 'none',marginBottom:'0'}}>
			      	<div className={styles.eduContainer}>
			      		<span>教育经历{index + 1}</span>
			      		<div style={{float: "right"}}>
			      			<div className={styles.eduEdit} onClick={handleEducation.bind(_this,res)}>
			      				<Icon type="edit"/>编辑
			      			</div>
			      			<Icon type="delete" style={{fontSize: '16px',color: '#c0c4cc'}} onClick={handleDeleteByEdu.bind(_this,res)}/>
			      		</div>
			      	</div>
			      	<Form layout="vertical"  style={editEducation?{display: "block"}:{display: 'none'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

						        <Col  md={12} sm={24}>
							        <FormItem  label="毕业院校">
							            {getFieldDecorator('graduation_school', {
							            rules: [{ required: true, message: '请输入1-40位字符的院校名称', max: 40}],
							            initialValue: res.graduation_school,
							            })(<Input placeholder="1-40位字符" />)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="专业">
							            {getFieldDecorator('major', {
							            rules: [{ required: true, message: '请输入1-40位字符的专业名称', max: 40}],
							            initialValue: res.major,
							            })(<Input placeholder="1-40位字符" />)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
						        <Col md={12} sm={24}>
						          <FormItem  label="学历">
						              {getFieldDecorator('education',{
						              	rules: [{ required: true,message: '请选择学历' }],
						              	initialValue: res.education,
						              })(
						              	<Select placeholder="请选择" style={{ width: '100%' }}>
						                    <Select.Option key="81">小学</Select.Option>
						                    <Select.Option key="71">初中</Select.Option>
						                    <Select.Option key="61">高中</Select.Option>
						                    <Select.Option key="41">中专</Select.Option>
						                    <Select.Option key="21">本科</Select.Option>
						                    <Select.Option key="12">硕士</Select.Option>
						                    <Select.Option key="11">博士</Select.Option>
						                </Select>
						              )}
						          </FormItem>
						        </Col>
						        <Col md={12} sm={24}>
						          <FormItem  label="教学方式">
						              {getFieldDecorator('teaching_methods',{
						              	initialValue: res.teaching_methods,
						              })(
						              	<Select placeholder="请选择" style={{ width: '100%' }}>
						                    <Select.Option key="81">统招全日制</Select.Option>
						                    <Select.Option key="71">自考</Select.Option>
						                    <Select.Option key="61">成考</Select.Option>
						                    <Select.Option key="41">其它</Select.Option>
						                </Select>
						              )}
						          </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
							    <Col md={12} sm={24}>
						          <FormItem  label="入学时间">
						              {getFieldDecorator('educational_experience_start_time', {
						              initialValue: res.educational_experience_start_time?moment(res.educational_experience_start_time):null,
						              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
						          </FormItem>
						        </Col>
							    <Col md={12} sm={24}>
						          <FormItem  label="毕业时间">
						              {getFieldDecorator('educational_experience_end_time', {
						              initialValue: res.educational_experience_end_time?moment(res.educational_experience_end_time):null,
						              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
						          </FormItem>
						        </Col>
					
					    	</Row>
					    	{/*<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col md={12} sm={24}>
						          <FormItem  label="是否第一学历">
						              {getFieldDecorator('first_education_type',{
						              	rules: [{ required: true,message: '请选择' }],
						              	initialValue: res.first_education_type,
						              })(
						              	<Select placeholder="请选择" style={{ width: '100%' }}>
						                    <Select.Option key="1">是</Select.Option>
						                    <Select.Option key="0">否</Select.Option>
						                </Select>
						              )}
						          </FormItem>
						        </Col>
					
					    	</Row>*/}
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: '30px'}}>
						    	<Col md={12} sm={24}>
						    		<Button 
					            	size="large" 
					            	style={{marginRight: '10px'}}
					            	onClick={()=> {
					            		const { form } = _this.props;
		  								form.resetFields();
					            		cancelEducation();
					            	}}>
					            	取消
					           		</Button>
						            <Button size="large" type="primary" onClick={()=>_this.handleLocalUpdate(event,res)}>保存</Button>
						        </Col>
						    </Row>
			
			
						</Form>
						<Form  {...formItemLayout} style={editEducation?{display: "none"}:{display: 'block'}}>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col  md={12} sm={24}>
							        <FormItem  label="毕业院校">
							            {getFieldDecorator('graduation_school',{
							            rules: [{ message: '请输入1-40位字符的院校名称', max: 40}],
							            })(<span>{res.graduation_school}</span>)}
							        </FormItem>
						        </Col>
						        <Col  md={12} sm={24}>
							        <FormItem  label="专业">
							            {getFieldDecorator('major',{
							            rules: [{ message: '请输入1-40位字符的专业名称', max: 40}],
							            })(<span>{res.major}</span>)}
							        </FormItem>
						        </Col>
							
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
						        <Col md={12} sm={24}>
						          <FormItem  label="学历">
						              {getFieldDecorator('education')(<span>
						              	{(() => {
							              		switch(res.education) {
								              		case "81":
								              			return "小学";
								              			break;
									              	case "71":
									              		return "初中";
									              		break;
									              	case "61":
									              		return "高中";
									              		break;
								              		case "41":
								              			return "中专";
								              			break;
								              		case "21":
								              			return "本科";
								              			break;
								              		case "12":
								              			return "硕士";
								              			break;
								              		case "11":
								              			return "博士";
								              			break;
								              		default:
								              			break;
								              	}
							              	}
							            )()}
						              </span>)}
						          </FormItem>
						        </Col>
						        <Col md={12} sm={24}>
						          <FormItem  label="教学方式">
						              {getFieldDecorator('teaching_methods')(<span>
						              	{(() => {
							              		switch(res.teaching_methods) {
								              		case "81":
								              			return "统招全日制";
								              			break;
									              	case "71":
									              		return "自考";
									              		break;
									              	case "61":
									              		return "成考";
									              		break;
								              		case "41":
								              			return "其它";
								              			break;
								              		default:
								              			break;
								              	}
							              	}
							            )()}
						              </span>)}
						          </FormItem>
						        </Col>
					
					    	</Row>
					    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
							    <Col md={12} sm={24}>
						          <FormItem  label="入学时间">
						              {getFieldDecorator('educational_experience_start_time')(<span>{res.educational_experience_start_time?moment(res.educational_experience_start_time).format('YYYY-MM-DD'):null}</span>)}
						          </FormItem>
						        </Col>
							    <Col md={12} sm={24}>
						          <FormItem  label="毕业时间">
						              {getFieldDecorator('educational_experience_end_time')(<span>{res.educational_experience_end_time?moment(res.educational_experience_end_time).format('YYYY-MM-DD'):null}</span>)}
						          </FormItem>
						        </Col>
					
					    	</Row>
					    	{/*<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					
						        <Col md={12} sm={24}>
						          <FormItem  label="是否第一学历">
						              {getFieldDecorator('first_education_type')(<span>
						              	{(() => {
							              		switch(res.first_education_type) {
								              		case "0":
								              			return "否";
								              			break;
									              	case "1":
									              		return "是";
									              		break;
								              		default:
								              			break;
								              	}
							              	}
							            )()}
						              </span>)}
						          </FormItem>
						        </Col>
					
					    	</Row>*/}
		
						</Form>
		      	</div>
		  	)
		
		});
  	}

  render() {
return (
	<div>
		{this.educationList()}
	</div>
);
  }

}

export default UpdateForm;
